perf(chatrooms): lazy loading with auto-deferred background initialization #49

BP602 · 2025-10-02T00:34:06Z

Summary

Implements lazy loading for chatrooms with automatic background initialization to achieve fast startup while preserving mention notifications.

Performance Impact:

✅ Priority chatroom loads first (~800ms LCP, 80% improvement)
✅ 18 remaining chatrooms auto-load in background (batches of 2, 300ms stagger)
✅ All chatrooms connected within ~3 seconds
✅ Mention notifications work for all chatrooms

Changes

Priority selection: Last active chatroom (localStorage) or first by order
Background loader: initializeDeferredChatroomsInBackground() processes chatrooms in batches
Lazy loader: initializeChatroomLazily() handles single chatroom initialization
Fallback: Manual trigger on chatroom switch if background incomplete
Tracking: loadedChatrooms Set prevents duplicate initialization
Non-blocking refresh: 7TV emote updates without intrusive UI messages
Debounce: Prevent concurrent refresh operations

Test Results

From localhost logs with 19 chatrooms:

Priority chatroom (xQc) loaded: Line 12-90 (~800ms)
Background batch start: Line 108 (800ms delay after priority)
All 18 chatrooms loaded: Line 648 (~3 seconds total)
Presence updates working: Line 670 (all chatrooms receiving notifications)

Test Plan

Verify fast initial load with priority chatroom
Confirm all chatrooms connect in background
Test mention notifications arrive for non-priority chatrooms
Validate manual switch to unloaded chatroom triggers immediate load
Check no duplicate initializations occur

Summary by CodeRabbit

New Features
- Progressive emote loading with placeholders and smooth fade-in.
- Support for personal emote sets and global cosmetic events.
Refactor
- Lazy chatroom initialization and shared connections for faster startup.
- Batched presence updates and improved background fetching for emotes.
- Faster cosmetic resolution via lookup maps.
Chores
- Enhanced telemetry: captures console errors/warnings and restores on disable.
- Enabled renderer source maps and updated debug configuration.
- Minor .env example cleanup.

Replace O(n) .find() operations with O(1) Map.get() lookups for badges and paints. This eliminates performance lag when rendering messages with 7TV cosmetics by: - Adding cosmeticsLookup state with badgeMap and paintMap hashmaps - Populating lookup maps in addCosmetics() when cosmetics are loaded - Replacing .find() calls with Map.get() in getUserStyle, getUserBadge, getUserPaint Fixes chat lag after recent 7TV styling bug fix by transforming complexity from O(n × messages) to O(1 × messages) for cosmetic lookups.

…t handling Major refactoring to improve 7TV WebSocket performance and fix cosmetic event processing: **Shared WebSocket Migration:** - Replace per-chatroom 7TV WebSocket connections with single shared connection - Remove individual StvWebSocket class (423 lines deleted) - Update sharedStvWebSocket with proper event routing and subscription management - Deprecate connectToStvWebSocket() method in ChatProvider - Update ConnectionManager to use updateChatroom() instead of addChatroom() **Entitlement Event Handling:** - Fix cosmetic event deduplication using ref_id instead of all-zeros id field - Remove kind === 10 filter that was blocking EMOTE_SET entitlements - Route BADGE/PAINT events to cosmetics store, EMOTE_SET to dedicated handler - Add handlePersonalEmoteSetEntitlement() placeholder for future implementation - Handle global cosmetic events once instead of broadcasting to all chatrooms **Performance Improvements:** - Add deduplication for cosmetic events (30s window, 60s cleanup) - Add dedicated tracking for personal and channel emote set updates - Reduce console log spam by 82% (2900+ → 500 lines) - Add VITE_DEBUG_7TV_WS flag for optional verbose WebSocket logging **Telemetry Enhancements:** - Add console.error/console.warn instrumentation in webTracing - Capture critical warnings and errors for telemetry **Related:** - Issue #48: Full implementation needed for personal emote set entitlement sync - Builds on commit 93f2790 (hashmap optimization for cosmetics lookups) This refactor eliminates redundant WebSocket connections while fixing several bugs in how 7TV cosmetic and entitlement events are processed.

Remove synthetic test emissions that were flooding production telemetry: - Remove setTimeout block that emitted synthetic console.error after 2 seconds - Gate renderer_export_smoke test span behind NODE_ENV === 'development' check - Document remaining test code as DEV-ONLY These test blocks were useful during development but should not run in production as they create false positives in telemetry data.

Implement progressive image loading for emotes to improve perceived performance and prevent layout shift during load. Changes: - Add useProgressiveEmoteLoading hook with 4 states (placeholder, loading, loaded, error) - Render fallback placeholders (2-char abbreviation) during load and on error - Smooth opacity transitions when images finish loading - SCSS styling for placeholder states with error indicator Impact: - Eliminates layout shift from async emote loading - Better UX with visual feedback during image load - Graceful degradation for failed emote loads

… initialization Load priority chatroom immediately for fast LCP, then auto-load remaining chatrooms in background to preserve mention notifications. Changes: - Priority chatroom selection (last active or first by order) - Deferred chatroom queue with automatic background loading - Background loader processes 2 chatrooms/batch with 300ms stagger - Track loaded chatrooms to prevent duplicate initialization - Non-blocking 7TV emote refresh without intrusive UI messages - Debounce logic to prevent concurrent refresh operations - Remember last active chatroom via localStorage - Manual lazy load trigger on chatroom switch (fallback) Implementation: - ConnectionManager.initializeDeferredChatroomsInBackground() - batch loader - ConnectionManager.initializeChatroomLazily() - single chatroom loader - 800ms delay after priority load before background batch starts - All chatrooms connected within ~3 seconds for full notification support Impact: - Startup LCP improvement: ~80% faster (priority chatroom only) - All chatrooms connected automatically in background - Mention notifications work for all chatrooms - Manual fallback if user switches before background completes

coderabbitai · 2025-10-02T00:34:13Z

Walkthrough

Adds progressive emote loading (UI + styles), introduces lazy chatroom initialization and a shared 7TV WebSocket routing model, expands cosmetics store with lookup maps and single-event handlers, instruments console errors for telemetry, enables renderer sourcemaps, adjusts debug config paths, minor presence log message tweak, and deletes the legacy per-chatroom 7TV WebSocket.

Changes

Cohort / File(s)	Summary
Environment & Build Config `\.env.example`, `\.vscode/launch.json`, `electron.vite.config.mjs`	Env comment/spacing adjustments; VSCode webRoot updated to `src/renderer/src`; renderer build sourcemaps enabled.
Chat UI Styling `src/renderer/src/assets/styles/components/Chat/Message.scss`	New `.emote-placeholder` and `.emote-progressive` classes with load/error opacity transitions.
Emote Component `src/renderer/src/components/Cosmetics/Emote.jsx`	Refactors to progressive image loading with placeholder/fallback, load state classes, and onLoad/onError handlers.
Chat Provider (STV & Lazy Loading) `src/renderer/src/providers/ChatProvider.jsx`	Adds dedup/batching sets/maps, global handling for 7TV cosmetic/entitlement events, personal emote set support, lazy chatroom init with background loading, shared STV connection strategy, and telemetry/logging updates.
Cosmetics Store Refactor `src/renderer/src/providers/CosmeticsProvider.jsx`	Adds telemetry hooks, normalization utilities, `cosmeticsLookup` maps, and new public methods (`addCosmetic`, `removeCosmetic`, `addCosmetics`); getters now use maps.
Telemetry Instrumentation `src/renderer/src/telemetry/webTracing.js`	Wraps/restores console.error/warn for telemetry when enabled; dev-only test spans; safeguards and restoration logic added.
Connection Manager (Lazy Loading) `utils/services/connectionManager.js`	Adds deferred/background chatroom initialization, loaded-state tracking, batching with spans/delays, global/channel emote caching flow, and cleanup for deferred caches. Public methods added for lazy status/control.
Shared 7TV WebSocket `utils/services/seventv/sharedStvWebSocket.js`	Adds `updateChatroom`, revises event routing (including personal emote sets), updates `findChatroomForEvent(type, body)`, enhances subscription lifecycle logging, and adds telemetry for unhandled events.
7TV Presence Log Tweak `utils/services/seventv/stvAPI.js`	Changes error message prefix to “[7TV Presence]”.
Legacy STV WebSocket Removal `utils/services/seventv/stvWebsocket.js`	Removes per-chatroom `StvWebSocket` implementation and related helpers/exports.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant App
  participant ConnMgr as ConnectionManager
  participant STV as Shared7TVWebSocket
  Note over App,ConnMgr: Lazy chatroom initialization
  User->>App: Selects chatroom
  App->>ConnMgr: initializeChatroomLazily(chatroomId)
  alt First load
    ConnMgr->>ConnMgr: Mark chatroom as loading
    ConnMgr->>STV: updateChatroom(chatroomId, ...)
    ConnMgr-->>App: isChatroomLoaded=true
    par Background
      rect rgba(200,230,255,0.3)
      ConnMgr->>ConnMgr: initializeDeferredChatroomsInBackground()
      end
    end
  else Already loaded
    ConnMgr-->>App: isChatroomLoaded=true
  end

sequenceDiagram
  autonumber
  participant STV as Shared7TVWebSocket
  participant Router as Event Router
  participant Chat as ChatProvider
  participant Cos as CosmeticsProvider
  Note over STV,Router: Centralized event routing
  STV-->>Router: Message(type, body)
  alt emote_set update (channel)
    Router->>Chat: handleEmoteSetUpdate({isPersonal:false,...})
  else emote_set update (personal)
    rect rgba(230,255,230,0.4)
    Router->>Chat: handlePersonalEmoteSetUpdate(...)
    end
  else cosmetic.create/delete
    Router->>Cos: addCosmetic/removeCosmetic(...)
  else entitlement.create/delete
    Router->>Chat: handlePersonalEmoteSetEntitlement(...)
  else unhandled
    Router-->>Router: telemetry span (unhandled)
  end

sequenceDiagram
  autonumber
  participant Emote as Emote.jsx
  participant Img as <img>
  Note over Emote,Img: Progressive emote loading
  Emote->>Emote: state = loading
  Emote-->>Emote: render placeholder (reserved size)
  Emote->>Img: set src + onLoad/onError
  alt onLoad
    Img-->>Emote: handleImageLoad()
    Emote-->>Emote: state = loaded (opacity 1)
  else onError
    Img-->>Emote: handleImageError()
    Emote-->>Emote: show fallback (placeholder)
  end

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Poem

I buffered an emote with a gentle glow,
While chatrooms load softly, in background flow.
I sniffed the wires—one socket to rule,
Badges and paints mapped tidy and cool.
Console squeaks traced, carrots aligned—
Hop, hop! Ship it—progress refined. 🥕✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title accurately and succinctly summarizes the main change—implementing lazy loading with auto-deferred background initialization for chatrooms—and follows conventional commit style without extraneous details.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch perf/lazy-loading-chatrooms

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ast-grep (0.39.5)

src/renderer/src/providers/ChatProvider.jsx

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting

@codex fix this CI failure
@codex address that feedback

chatgpt-codex-connector · 2025-10-02T00:39:37Z

utils/services/connectionManager.js

+      // Only add to 7TV if we have valid IDs
+      const stvId = chatroom.streamerData?.user?.stv_id || "0";
+      const stvEmoteSetId = chatroom?.channel7TVEmotes?.[1]?.setInfo?.id || "0";
+      this.stvWebSocket.addChatroom(chatroom.id, chatroom.streamerData.user_id, stvId, stvEmoteSetId);


Use robust lookup for lazy 7TV emote set subscription

The lazy path derives stvEmoteSetId via chatroom.channel7TVEmotes?.[1]?.setInfo?.id. The initial connection flow searched the emote sets with .find(set => set.type === "channel") because the array order isn’t stable—global and personal sets can come before the channel set. When the channel set isn’t at index 1, this code passes "0" to SharedStvWebSocket.addChatroom, causing the websocket to skip subscribeToEmoteSetEvents and the deferred chatroom never receives 7TV emote updates. Use the same .find logic as the eager path to extract the channel set ID before subscribing.

Useful? React with 👍 / 👎.

coderabbitai

Actionable comments posted: 6

🧹 Nitpick comments (3)

src/renderer/src/components/Cosmetics/Emote.jsx (3)
4-45: Consider simplifying by removing redundant showFallback state.

The showFallback state mirrors loadState === 'error'. You could derive it directly from loadState to reduce state variables and prevent potential inconsistencies:
-const useProgressiveEmoteLoading = (emote, type) => {
-  const [loadState, setLoadState] = useState('loading'); // loading, loaded, error
-  const [showFallback, setShowFallback] = useState(false);
+const useProgressiveEmoteLoading = (emote, type) => {
+  const [loadState, setLoadState] = useState('loading'); // loading, loaded, error

   // Define fallback placeholder (prevents layout shift)
   const placeholder = useMemo(() => {
     const placeholderWidth = type === "stv" ? (emote.width || 28) : 32;
     const placeholderHeight = type === "stv" ? (emote.height || 28) : 32;

     return {
       width: placeholderWidth,
       height: placeholderHeight,
       backgroundColor: '#2a2a2a',
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',
       borderRadius: '4px',
       color: '#666',
       fontSize: '10px',
       fontFamily: 'monospace'
     };
   }, [emote, type]);

   const handleImageLoad = useCallback(() => {
     setLoadState('loaded');
-    setShowFallback(false);
   }, []);

   const handleImageError = useCallback(() => {
     setLoadState('error');
-    setShowFallback(true);
   }, []);

   return {
     loadState,
-    showFallback,
+    showFallback: loadState === 'error',
     placeholder,
     handleImageLoad,
     handleImageError
   };
 };
139-142: Consider removing inline opacity styles; rely on CSS classes.

The inline opacity transition duplicates the CSS rules in Message.scss (lines 1060-1066). Removing the inline styles simplifies the component and centralizes styling:
 <img
   className={`${type === "stv" ? "stvEmote" : "kickEmote"} emote ${loadState}`}
   src={emoteImageSrc}
   srcSet={type === "stv" ? emoteSrcSet(emote) : null}
   alt={name}
   loading="lazy"
   fetchpriority="low"
   decoding="async"
   onLoad={handleImageLoad}
   onError={handleImageError}
-  style={{
-    opacity: loadState === 'loaded' ? 1 : 0,
-    transition: 'opacity 0.2s ease-in-out'
-  }}
 />
Ensure the CSS classes in Message.scss provide the correct opacity values for each state (currently lines 1060-1070).

146-161: Consider applying progressive loading to overlaid emotes for consistency.

The overlaid zero-width emotes don't use the progressive loading pattern. While they're decorative, applying the same loading pattern would provide a consistent experience and prevent potential layout shifts if they fail to load.

If you'd like to apply progressive loading to overlaid emotes, you could refactor them to use the same hook or create a simplified version for these secondary emotes.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 91fca72 and 3b5ba1c.

📒 Files selected for processing (12)

.env.example (1 hunks)
.vscode/launch.json (1 hunks)
electron.vite.config.mjs (1 hunks)
src/renderer/src/assets/styles/components/Chat/Message.scss (1 hunks)
src/renderer/src/components/Cosmetics/Emote.jsx (2 hunks)
src/renderer/src/providers/ChatProvider.jsx (22 hunks)
src/renderer/src/providers/CosmeticsProvider.jsx (5 hunks)
src/renderer/src/telemetry/webTracing.js (2 hunks)
utils/services/connectionManager.js (7 hunks)
utils/services/seventv/sharedStvWebSocket.js (6 hunks)
utils/services/seventv/stvAPI.js (1 hunks)
utils/services/seventv/stvWebsocket.js (0 hunks)

💤 Files with no reviewable changes (1)

utils/services/seventv/stvWebsocket.js

🧰 Additional context used

📓 Path-based instructions (8)

**